import { NavBar, Space, Popover } from "antd-mobile"
import { SearchOutline, MoreOutline, LeftOutline,ScanningOutline ,CameraOutline,UserOutline,AntOutline} from 'antd-mobile-icons'
import { FC, ReactNode, useState } from 'react'
import './head.scss'
import { useTiaoZhuan } from "../hooks/routers"
import { useLocation } from "react-router-dom"
import { Action } from 'antd-mobile/es/components/popover'

export const MyHead: FC<{
    title: string,
    noBack?: boolean,
    children?: ReactNode,
    router?:string   //指定跳转
}> = ({
    title,
    noBack = true,
    children,
    router
}) => {
        const { Tz } = useTiaoZhuan();
        const { pathname } = useLocation()
        const actions: Action[] = [
            { key: '/scan', icon: <ScanningOutline />, text: '扫一扫' },
            { key: '/photo', icon: <CameraOutline />, text: '相机' },
            { key: '/homes/my', icon: <UserOutline />, text: '个人中心' ,disabled:pathname=='/homes/my'},
            { key: '/login', icon: < AntOutline />, text: '登录',disabled:pathname=='/login'},
        ]
        const right = (
            <div>
                <Space style={{ fontSize: 24 }}>
                    {pathname == '/search' || <SearchOutline onClick={() => Tz('/search')} />}

                        <Popover.Menu
                            mode='dark'
                            actions={actions}
                            placement='bottom-end'
                            onAction={node => Tz(node.key!)
                            
                            }
                            trigger='click'
                        >
                            <MoreOutline />
                        </Popover.Menu>
                </Space>
            </div>
        )
        const left = (
            <div>
                {
                    noBack && <Space style={{ fontSize: 24 }}>
                        {children || <LeftOutline onClick={()=>Tz(router??-1)}/>}
                    </Space>
                }
                {
                    
                }
            </div>
        )
        return (
            <NavBar className="nav" right={right} left={left} backArrow={false} >
                {title}
            </NavBar>
        )
    }